import { Link } from "react-router-dom";
import { Button } from "../../components/Button/Button";
import styles from "./LiderBoardPage.module.css";
import { useEffect } from "react";
import { getLeaders } from "../../utils/api";
import { useLeaderContext } from "../../context/hooks/useLeader";

export const LiderBoardPage = () => {
  const { liderList, setLiderList } = useLeaderContext();

  useEffect(() => {
    getLeaders()
      .then(data => {
        setLiderList(data.leaders.sort((a, b) => a.time - b.time).slice(0, 10));
      })
      .catch(error => {
        console.log(error.message);
      });
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.titlePage}>Лидерборд</div>
        <Link to="/game/9">
          <Button>Начать игру</Button>
        </Link>
      </div>
      <div className={styles.rowTable}>
        <div className={styles.rowTable__positionTitle}>Позиция</div>
        <div className={styles.rowTable__userTitle}>Пользователь</div>
        <div className={styles.rowTable__achiveTitle}>Достижения</div>
        <div className={styles.rowTable__timeTitle}>Время</div>
      </div>
      {liderList.map((lider, index) => (
        <div key={lider.id} className={styles.rowTable}>
          <div className={styles.rowTable__position}># {index + 1}</div>
          <div className={styles.rowTable__user}>{lider.name}</div>
          <div className={styles.rowTable__achive}>
            {lider.achievements.includes(1) ? (
              <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M18.5485 4.68386C18.7211 4.06469 18.5235 2.54349 19.7298 1.53679C20.936 0.53008 22.8124 0.654805 23.9415 1.71274C25.0705 2.77067 25.2522 4.75959 23.9165 6.0692C22.5807 7.37881 21.9651 6.64828 21.22 7.35431C20.4749 8.06034 20.6044 8.63942 21.0655 9.06705C21.5289 9.49468 26.1268 14.2053 25.9973 14.5059C25.8678 14.8066 22.7352 18.2833 22.2218 18.535C21.7084 18.7867 20.8088 18.7622 20.6294 17.9314C20.4499 17.1007 20.7588 15.4391 19.4731 15.0093C18.1896 14.5817 17.6239 14.9336 16.3654 16.2432C15.1069 17.5528 14.5413 18.9871 15.5681 19.7177C16.5949 20.4482 17.8806 20.1453 18.394 21.0028C18.9074 21.8602 18.1373 22.6398 16.7766 23.8737C15.4159 25.1075 14.3618 26.1143 14.1823 25.9895C14.0029 25.8626 10.0979 21.809 9.71397 21.3814C9.32779 20.9538 8.58268 20.5751 7.86483 21.2299C7.14471 21.8847 7.01749 24.0251 3.98708 24.0251C0.956672 24.0251 0.593205 20.8023 1.67225 19.4682C2.75129 18.1341 5.13882 18.0071 5.19107 17.1007C5.21379 16.6842 3.90303 15.5616 2.72631 14.3567C1.34286 12.938 0.0570901 11.4346 0.00256999 11.2586C-0.0996553 10.9312 2.87851 8.06034 3.44415 7.65721C4.0098 7.25408 4.65041 7.50576 4.95936 7.83316C5.26831 8.16057 5.34554 9.16727 5.60224 9.74635C5.85894 10.3254 7.0652 12.8444 9.9684 9.97353C12.8443 7.12713 10.1229 5.89325 9.1983 5.64157C8.27373 5.38989 7.60813 5.30749 7.34916 4.38319C7.14471 3.65265 8.27373 2.7974 9.455 1.68824C10.6363 0.579079 11.3291 0 11.6381 0C11.947 0 16.0815 4.35646 16.6221 4.85981C17.1628 5.36317 17.4944 5.49012 17.8806 5.38767C18.2645 5.28967 18.4713 4.96227 18.5485 4.68386Z"
                  fill="url(#paint0_radial_201_94)"
                />
                <defs>
                  <radialGradient
                    id="paint0_radial_201_94"
                    cx="0"
                    cy="0"
                    r="1"
                    gradientUnits="userSpaceOnUse"
                    gradientTransform="translate(12.654 -7.18504) scale(27.084 26.5541)"
                  >
                    <stop offset="0.508" stopColor="#B7D118" />
                    <stop offset="0.572" stopColor="#B2D019" />
                    <stop offset="0.643" stopColor="#A5CD1D" />
                    <stop offset="0.717" stopColor="#8FC922" />
                    <stop offset="0.793" stopColor="#70C22A" />
                    <stop offset="0.871" stopColor="#48BA34" />
                    <stop offset="0.949" stopColor="#18B040" />
                    <stop offset="0.981" stopColor="#02AB46" />
                  </radialGradient>
                </defs>
              </svg>
            ) : (
              <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_i_201_110)">
                  <path
                    d="M18.5485 4.68386C18.7211 4.06469 18.5235 2.54349 19.7298 1.53679C20.936 0.53008 22.8124 0.654805 23.9415 1.71274C25.0705 2.77067 25.2522 4.75959 23.9165 6.0692C22.5807 7.37881 21.9651 6.64828 21.22 7.35431C20.4749 8.06034 20.6044 8.63942 21.0655 9.06705C21.5289 9.49468 26.1268 14.2053 25.9973 14.5059C25.8678 14.8066 22.7352 18.2833 22.2218 18.535C21.7084 18.7867 20.8088 18.7622 20.6294 17.9314C20.4499 17.1007 20.7588 15.4391 19.4731 15.0093C18.1896 14.5817 17.6239 14.9336 16.3654 16.2432C15.1069 17.5528 14.5413 18.9871 15.5681 19.7177C16.5949 20.4482 17.8806 20.1453 18.394 21.0028C18.9074 21.8602 18.1373 22.6398 16.7766 23.8737C15.4159 25.1075 14.3618 26.1143 14.1823 25.9895C14.0029 25.8626 10.0979 21.809 9.71397 21.3814C9.32779 20.9538 8.58268 20.5751 7.86483 21.2299C7.14471 21.8847 7.01749 24.0251 3.98708 24.0251C0.956672 24.0251 0.593205 20.8023 1.67225 19.4682C2.75129 18.1341 5.13882 18.0071 5.19107 17.1007C5.21379 16.6842 3.90303 15.5616 2.72631 14.3567C1.34286 12.938 0.0570901 11.4346 0.00256999 11.2586C-0.0996553 10.9312 2.87851 8.06034 3.44415 7.65721C4.0098 7.25408 4.65041 7.50576 4.95936 7.83316C5.26831 8.16057 5.34554 9.16727 5.60224 9.74635C5.85894 10.3254 7.0652 12.8444 9.9684 9.97353C12.8443 7.12713 10.1229 5.89325 9.1983 5.64157C8.27373 5.38989 7.60813 5.30749 7.34916 4.38319C7.14471 3.65265 8.27373 2.7974 9.455 1.68824C10.6363 0.579079 11.3291 0 11.6381 0C11.947 0 16.0815 4.35646 16.6221 4.85981C17.1628 5.36317 17.4944 5.49012 17.8806 5.38767C18.2645 5.28967 18.4713 4.96227 18.5485 4.68386Z"
                    fill="#E9ECED"
                  />
                </g>
                <defs>
                  <filter
                    id="filter0_i_201_110"
                    x="0"
                    y="0"
                    width="26"
                    height="27"
                    filterUnits="userSpaceOnUse"
                    colorInterpolationFilters="sRGB"
                  >
                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                    <feColorMatrix
                      in="SourceAlpha"
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      result="hardAlpha"
                    />
                    <feOffset dy="1" />
                    <feGaussianBlur stdDeviation="0.5" />
                    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0" />
                    <feBlend mode="normal" in2="shape" result="effect1_innerShadow_201_110" />
                  </filter>
                </defs>
              </svg>
            )}

            {lider.achievements.includes(2) ? (
              <svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M21.0369 18.4848C20.8394 18.4042 20.6226 18.383 20.4131 18.4237C20.2037 18.4644 20.0107 18.5652 19.8579 18.7137L19.7222 18.849C18.5553 20.0367 17.1623 20.9798 15.625 21.6233C14.0877 22.2667 12.4371 22.5974 10.77 22.5959C9.10264 22.5718 7.45663 22.218 5.92717 21.5552C4.39771 20.8924 3.01517 19.9337 1.85951 18.7345C1.71102 18.5759 1.51653 18.4676 1.30326 18.4246C1.08998 18.3817 0.868589 18.4064 0.670056 18.4952C0.461888 18.5747 0.284741 18.7187 0.164572 18.906C0.0444034 19.0933 -0.0124688 19.3141 0.00228981 19.536V24.9592C0.00228981 25.2352 0.112218 25.5 0.30789 25.6952C0.503563 25.8903 0.768951 26 1.04567 26H20.6196C20.8963 26 21.1617 25.8903 21.3573 25.6952C21.553 25.5 21.6629 25.2352 21.6629 24.9592V19.4839C21.672 19.2738 21.6171 19.0658 21.5053 18.8875C21.3936 18.7091 21.2303 18.5687 21.0369 18.4848Z"
                  fill="url(#paint0_linear_201_104)"
                />
                <path
                  d="M10.8536 0C8.70748 0 6.60951 0.63484 4.82504 1.82424C3.04057 3.01364 1.64975 4.70418 0.828444 6.68208C0.00714305 8.65998 -0.207747 10.8364 0.210949 12.9361C0.629645 15.0359 1.66312 16.9646 3.18069 18.4784C4.69825 19.9922 6.63175 21.0232 8.73668 21.4408C10.8416 21.8585 13.0234 21.6441 15.0062 20.8248C16.989 20.0056 18.6837 18.6182 19.8761 16.8381C21.0684 15.0581 21.7048 12.9653 21.7048 10.8244C21.6993 7.95528 20.5543 5.20525 18.5205 3.17647C16.4867 1.14769 13.7299 0.00550168 10.8536 0Z"
                  fill="url(#paint1_radial_201_104)"
                />
                <defs>
                  <linearGradient
                    id="paint0_linear_201_104"
                    x1="10.832"
                    y1="18.4035"
                    x2="10.832"
                    y2="27.061"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#FFB500" />
                    <stop offset="1" stopColor="#FFE052" />
                  </linearGradient>
                  <radialGradient
                    id="paint1_radial_201_104"
                    cx="0"
                    cy="0"
                    r="1"
                    gradientUnits="userSpaceOnUse"
                    gradientTransform="translate(10.8536 21.6406) rotate(90) scale(16.0758 16.1156)"
                  >
                    <stop offset="0.015625" stopColor="#7F12F4" />
                    <stop offset="1" stopColor="#E0C5FF" />
                  </radialGradient>
                </defs>
              </svg>
            ) : (
              <svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_i_201_112)">
                  <path
                    d="M21.0369 18.4847C20.8394 18.4042 20.6226 18.383 20.4131 18.4237C20.2037 18.4644 20.0107 18.5652 19.8579 18.7137L19.7222 18.849C18.5553 20.0366 17.1623 20.9798 15.625 21.6232C14.0877 22.2667 12.4371 22.5974 10.77 22.5959C9.10264 22.5717 7.45663 22.218 5.92717 21.5552C4.39771 20.8924 3.01517 19.9337 1.85951 18.7345C1.71102 18.5759 1.51653 18.4675 1.30326 18.4246C1.08998 18.3817 0.868589 18.4064 0.670056 18.4951C0.461888 18.5747 0.284741 18.7187 0.164572 18.906C0.0444034 19.0933 -0.0124688 19.3141 0.00228981 19.536V24.9592C0.00228981 25.2352 0.112218 25.5 0.30789 25.6951C0.503563 25.8903 0.768951 26 1.04567 26H20.6196C20.8963 26 21.1617 25.8903 21.3573 25.6951C21.553 25.5 21.6629 25.2352 21.6629 24.9592V19.4839C21.672 19.2738 21.6171 19.0658 21.5053 18.8874C21.3936 18.7091 21.2303 18.5687 21.0369 18.4847Z"
                    fill="#E9ECED"
                  />
                </g>
                <g filter="url(#filter1_i_201_112)">
                  <path
                    d="M10.8536 0C8.70748 0 6.60951 0.63484 4.82504 1.82424C3.04057 3.01364 1.64975 4.70418 0.828444 6.68208C0.00714305 8.65998 -0.207747 10.8364 0.210949 12.9361C0.629645 15.0359 1.66312 16.9646 3.18069 18.4784C4.69825 19.9922 6.63175 21.0232 8.73668 21.4408C10.8416 21.8585 13.0234 21.6441 15.0062 20.8248C16.989 20.0056 18.6837 18.6182 19.8761 16.8381C21.0684 15.0581 21.7048 12.9653 21.7048 10.8244C21.6993 7.95528 20.5543 5.20525 18.5205 3.17647C16.4867 1.14769 13.7299 0.00550168 10.8536 0Z"
                    fill="#E9ECED"
                  />
                </g>
                <defs>
                  <filter
                    id="filter0_i_201_112"
                    x="0"
                    y="18.4035"
                    width="21.6641"
                    height="8.59647"
                    filterUnits="userSpaceOnUse"
                    colorInterpolationFilters="sRGB"
                  >
                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                    <feColorMatrix
                      in="SourceAlpha"
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      result="hardAlpha"
                    />
                    <feOffset dy="1" />
                    <feGaussianBlur stdDeviation="0.5" />
                    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0" />
                    <feBlend mode="normal" in2="shape" result="effect1_innerShadow_201_112" />
                  </filter>
                  <filter
                    id="filter1_i_201_112"
                    x="0.00244141"
                    y="0"
                    width="21.7026"
                    height="22.6488"
                    filterUnits="userSpaceOnUse"
                    colorInterpolationFilters="sRGB"
                  >
                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                    <feColorMatrix
                      in="SourceAlpha"
                      type="matrix"
                      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                      result="hardAlpha"
                    />
                    <feOffset dy="1" />
                    <feGaussianBlur stdDeviation="0.5" />
                    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0" />
                    <feBlend mode="normal" in2="shape" result="effect1_innerShadow_201_112" />
                  </filter>
                </defs>
              </svg>
            )}
          </div>
          <div className={styles.rowTable__time}>{lider.time}</div>
        </div>
      ))}
    </div>
  );
};
